@charset "utf-8";
@import "init";
@import "common";

.web {
    font-size: 16px;
    header {
        padding: r(25) 0;
        background-color: $bg_color;
        position: relative;
        .list {
            color: #fff;
            margin-left: r(23);
            i {
                font-size: r(24);
            }
        }
        .search {
            color: #fff;
            padding-right: r(17);
            i {
                font-size: r(24);
            }
        }
        .img_box {
            width: r(209);
            height: r(39);
            overflow: hidden;
            margin: 0 auto;
            img {
                width: 100%;
            }
        }
    }
    .number {
        position: absolute;
        left: 6%;
        top: 1.5%;
        i {
            font-size: r(20);
            color: #f00;
        }
    }

    main {
        position: absolute;
        left: 0;
        top: r(89);
        bottom: r(107);
        width: 100%;
        overflow-y: auto;
        .banner {
            margin: r(7) 0;
            img {
               width: 100%;
                overflow: hidden; 
            }         
        }
        nav{
            ul{
                display: flex;
                justify-content: space-between;
              
                text-align: center;
                li{
                    width: r(213);
                    height: r(90);
                    line-height: r(90);
                    border-bottom: 1px solid #dfdfdf;
                    a{
                        font-size: r(26);
                        font-family: "微软雅黑";
                        color: $sub_color;
                    }

                }
                
            }
        }
        
        input{
            display: none;
        }
        #radio:checked~.main_text{
            display: block;
        }
        #radio:checked~nav li:nth-child(1) {
            background-color: $bg_color;
           
        }
        #radio:checked~nav li:nth-child(1) a{
           
            color: white;
        }
         #radio2:checked~nav li:nth-child(2) {
            background-color: $bg_color;
           
        }
        #radio2:checked~nav li:nth-child(2) a{
           
            color: white;
        }
         #radio2:checked~.main_text2{
            display: block;
        } 
         #radio3:checked~.main_text3{
            display: block;
        }
        #radio3:checked~nav li:nth-child(3) {
            background-color: $bg_color;
           
        }
        #radio3:checked~nav li:nth-child(3) a{
           
            color: white;
        }
        .main_text{ 
            display: none;
           width: r(582);
           margin: 0 auto;
           overflow: hidden;
           .txt{  
                
                width: r(582);
                font-size: r(18);
                color: $sub_color;
                text-indent: r(40);
                margin-bottom: r(30);
                
           }
           .txt:first-of-type{
               margin-top: r(48);
           }
            
        }
          .main_text2{ 
            display: none;
           width: r(582);
           margin: 0 auto;
           overflow: hidden;
           .txt{  
                
                width: r(582);
                font-size: r(38);
                color: $sub_color;
                text-indent: r(40);
                margin-bottom: r(30);
                
           }
           .txt:first-of-type{
               margin-top: r(48);
           }
            
        }
        .main_text3{ 
            display: none;
           width: r(582);
           margin: 0 auto;
           overflow: hidden;
           .txt{  
                
                width: r(582);
                font-size: r(38);
                color: $sub_color;
                text-indent: r(40);
                margin-bottom: r(30);
                
           }
           .txt:first-of-type{
               margin-top: r(48);
           }
            
        }
        
        .main_text2{
            display: none;
        }
        
         .main_text3{
            display: none;
        }
        .main_img{
            margin: r(45) auto;
            width: r(582);
            height: r(330);
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .main_footer{
            width: r(582);
            overflow: hidden;
            margin: 0 auto;
            .footer_top{
                width: 100%;
                height: r(80);
                line-height: r(80);
                background-color: $bg_color;
                
                .top_icon{
                    display: inline-block;
                    margin-left: r(25);
                    i{
                        
                        transform: scale(1.5);
                        color: white;
                    }
                }
                p{
                    display: inline-block;
                    margin-left: r(25);
                    font-size: r(30);
                    color: white;
                }
                .top_icon2{
                    display: inline-block;
                    margin-left: r(220);
                    i{
                     transform: scale(1.5);
                     color: white;   
                    }
                }
            }
            .main_content{
                .content_txt{
                    width: r(483);
                    height: r(60);
                   background-color: #f3f3f3;
                 
                    padding: r(35) 0 r(35) r(92);
                    line-height: r(32);
                    
                   position: relative;
                   
                    p{
                        font-size: r(32);
                        color: $text_color;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    span{
                        font-size: r(20);
                        color: $bg_color;
                    }
                    i{
                    color: #d4dee0;
                     transform: scale(1.5);
                     position: absolute;
                     left: 4.5%;
                     top: 30%;
                     z-index:10;
                    }
                    .active {
                    color: $bg_color;
                }
                    
                }
                .content_txt i:hover{
                    color: $bg_color;
                }
               
                .content_txt:nth-of-type(5){
                    border-bottom: 1px solid #dfdfdf;
                }
                .content_txt::before{
                        content: "";
                        display: block;
                        width: r(1);
                        height: 100%;
                        border-left: r(3) solid #d0dbdc;
                        position: absolute;
                        left: 6.8%;
                        top: 0;  
                        z-index: 1;
                        
                    }
                 
            }
        }
         .main_bottom {
            margin: r(20) 0;
            display: flex;
            justify-content: center;
            a {
                display: inline-block;
                font-size: r(22);
                font-family: "微软雅黑";
                color: $sub_color;
                &:hover {
                    color: $bg_color;
                }
            }
        }
    }
}